<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>制作全网热播视频页面</title>
  <style>
    *{margin: 0; padding: 0;font-family: "微软雅黑";font-size: 14px;}
    ul,ol,li{list-style: none;}
    #play{margin: 0 auto; width:680px; overflow: hidden;}
    #play h1{line-height: 40px; font-size: 22px;}
    #play ul>li{
      float: left;
      width: 220px;
      height: 308px;
      overflow: hidden;
      position: relative;
    }
    #play ol li{height: 37px; padding: 0px 0px 0 10px; position: relative;}
    #play ul>li>span{display: block; position: absolute; left: 0; bottom: 0; font-size: 25px; color: #ffffff; font-weight: bold; padding: 5px 10px; z-index: 100;}
    #play ul>li>p{position: absolute; left: 50px; bottom: 10px; color: #ffffff;}
    #play ol{padding-top: 13px; padding-right: 5px;}
    #play ol li span{display:inline-block; color: #ffffff; margin-right: 5px; width: 20px; height: 20px; font-size: 12px; font-weight: bold; text-align: center;}
    #play ol li p{position: absolute; right: 0; top: 3px; color: #ffffff; background: #f0a30f; padding: 0 8px; font-size: 12px; display: none;}

  </style>
</head>
<body>
<section id="play">
  <h1>全网热播视频</h1>
  <ul>
    <li><img src="img/flv01.jpg"><p>昊花梦</p><span>1</span></li>
    <li><img src="img/flv02.jpg"><p>好先生</p><span>2</span></li>
    <li>
      <ol>
        <li><span>3</span>三八线<p>加入看单</p></li>
        <li><span>4</span>吉详天宝<p>加入看单</p></li>
        <li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
        <li><span>6</span>仙剑云之凡<p>加入看单</p></li>
        <li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
        <li><span>8</span>琅琊榜<p>加入看单</p></li>
        <li><span>9</span>那年青春我们正好<p>加入看单</p></li>
        <li><span>10</span>乡村受情8（上）<p>加入看单</p></li>
      </ol>
    </li>
  </ul>
</section>
<script src="adapter/jquery.js"></script>
<script>
  $(document).ready(function () {
    $("ul>li:not(:last)").css({"margin-right":"10px"});
    $("ul>li:not(:last) span,ul>li:last li:first span").css({"background-color": "#f0a30f"});
    $("ol li:gt(0) span").css({"background-color": "#a4a3a3"});
    $("ul>li:last").css({"background-color": "#f0f0f0"});
    $(" ol li:eq(0),ol li:eq(2),ol li:eq(3),ol li:eq(4)").css({
      "background-image": "url(img/orange.jpg)",
      "background-repeat": "no-repeat",
      "background-position": "right -2px"
    });
    $(" ol li:eq(1),ol li:eq(5),ol li:eq(6),ol li:eq(7)").css({
      "background-image": "url(img/green.jpg)",
      "background-repeat": "no-repeat",
      "background-position": "right -2px"
    });
    $("ol").mouseover(function () {
      $("ol li p").show();
    });
    $("ol").mouseout(function () {
      $("ol li p").hide();
    });
  } );
</script>
</body>
</html>
